<!--  -->
<template>
  <div>
    <div ref="chart" class="position-center" :style="{ width: '560px', height: '240px' }"></div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, ref, watch } from 'vue'
  import * as echarts from 'echarts'
  import { LineData } from '../utils/interface'
import { getLineOption } from '../utils/options';

  interface Props {
    data: LineData []
    axisData: string[]
    width?: '300px' | string
    height?: '200px' | string
  }

  const chart = ref()
  const props = defineProps<Props>()

  const renderChart = () => {
    echarts.dispose(chart.value)
    const eChart = echarts.init(chart.value)
    const option = getLineOption(props.data, props.axisData);
    eChart.setOption(option);
  }

  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )

  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })
</script>
<style lang="scss" scoped></style>
